<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="box">
        <!-- 双括号表达式 -->
        <h1>{{msg}}</h1>
        <!-- 使用指令 v-开头的就指令 
        v-text=''  v-html=''
        -->
        <!-- v-text将变量或者表达式作为字符串解析 -->
        <h1 v-text="msg2"></h1>
        <!-- v-html将其作为html代码解析 -->
        <h1 v-html="msg2"></h1>
        <!-- v-text与v-html谁安全(innerText和innerHtml谁安全)?
            v-text 安全  v-html不安全 原因就是它们的特点
         -->

        <h1>{{msg}}</h1>
        <!-- v-once实现的是一次性插入,当值在此发生改变时,它不再改动 -->
        <h1 v-once>{{msg}}</h1>
        <div title="title效果">title</div>
        <!-- v-bind供标签上的属性使用 , 通过v-bind绑定过后的标签上的属性
        后面的值即为变量或者表达式 -->
        
         <div v-bind:title = 'msg'>999</div>
         <a v-bind:href="url">百度一下</a>

         <a v-bind:href="url">{{msg}}</a>
         <!-- 简写 -->
         <a :href="url">{{msg}}</a>
    </div>
    <script>
        let vm = new Vue({
            el: '.box',
            data: {
                msg: '快乐嘛',
                msg2: '<div>快乐的不只是一丢丢</div>',
                url:"http//baidu.com"
            }
        })
    </script>
</body>

</html>